<template>
  <view
    class="text-button"
    hover-class="hovering"
    :class="{ inline, disabled, 'plain-disabled': plainDisabled, [`is-${size} is-${type}`]: true }"
    @click="onClick"
  >
    <block v-if="text">{{ text }}</block>
    <slot v-else></slot>
  </view>
</template>

<script setup lang="ts">
import { vibrate } from '@/utils/mpHelper'

const props = withDefaults(
  defineProps<{
    type: 'plain' | 'primary' | 'secondary'
    size?: 'medium' | 'small' | 'large'
    text?: string
    inline?: boolean
    underline?: boolean
    disabled?: boolean // 完全禁用操作
    plainDisabled?: boolean // 仅样式禁用 仍然触发事件
    // 按钮是否点击时振动
    vibrate?: boolean
  }>(),
  {
    type: 'primary',
    size: 'medium',
  }
)
const emit = defineEmits<{
  (e: 'click', event: Event): void
  (e: 'disabled-click', event: Event): void
}>()

function onClick(e: Event) {
  if (props.disabled) {
    return emit('disabled-click', e)
  }

  props.vibrate && vibrate()
  emit('click', e)
}
</script>

<style scoped lang="less">
.text-button {
  text-align: center;
  white-space: nowrap;
  transition: filter 0.2s;
  &.inline {
    display: inline;
    padding: 10rpx;
  }
  &.underline {
    text-decoration: underline;
  }
  &:not(.disabled).hovering {
    filter: opacity(0.8);
  }
  &.is-primary {
    color: var(--primary-color);
    &:not(.disabled).hovering {
      filter: brightness(0.8);
    }
  }
  &.is-secondary {
    color: rgba(var(--dark-vector), 0.6);
  }
  &.is-plain {
    color: var(--dark-color);
  }
  &.is-large {
    font-weight: 600;
    font-size: 32rpx;
    line-height: 88rpx;
  }
  &.is-medium {
    font-weight: 600;
    font-size: 32rpx;
    line-height: 44rpx;
  }
  &.is-small {
    font-weight: 600;
    font-size: 28rpx;
    line-height: 40rpx;
  }
  &.plain-disabled,
  &.disabled {
    filter: opacity(0.3);
  }
}
</style>
